<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  li{list-style: none;}
  body{background: #000}
  div{width: 380px;height: 230px;background: #fff;margin: 100px auto;padding: 10px;}
  img{width: 300px;height: 200px;float: left;}
  ul{width: 80px;float: left;display: none;}
  li{widows: 100%;height: 30px;line-height: 30px;text-align: center;margin-bottom: 10px;background: #F7F7F7;}
  span{display: inline-block;width: 50px;margin-right: 10px;margin-bottom:2px;background: #94FFC6;padding: 5px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Span = document.getElementsByTagName('span');
      var Img = document.getElementsByTagName('img')[0];
      var Ul = document.getElementsByTagName('ul');
      var Li = document.getElementsByTagName('li');
      var arr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'];
      var n = 0;
      var timer = null;
      function inital(n){
        var m = (Math.floor(n / 3)) % Ul.length;
        for (var i = 0; i < Ul.length ; i++) {
          Ul[i].style.display = 'none';
          Span[i].style.background = '#94FFC6';
        };
        Span[m].style.background = '#005A63';
        Ul[m].style.display = 'block';
        Img.src = arr[n%arr.length];
        for (var i = 0; i < Li.length; i++) {
          Li[i].style.background = '#F7F7F7';
        };
        Li[n].style.background = '#639CC6';
      }
      inital(n);
      function cart(){
        timer = setInterval(function(){
          n++;
          n %= Li.length;
          inital(n)
        },1000)
      }
      cart();
    }
  </script>
</head>
<body>
  <div>
    <span>菜单一</span>
    <span>菜单二</span>
    <img src="images/1.jpg">
    <ul>
      <li>图片1</li>
      <li>图片2</li>
      <li>图片3</li>
    </ul>
    <ul>
      <li>图片4</li>
      <li>图片5</li>
      <li>图片6</li>
    </ul>
  </div>
</body>
</html>